{% extends 'project/layout.html' %}
{% load static %}
{% block title %}
项目管理
{% endblock%}
{% block css%}
<link rel="stylesheet" href="{% static 'plugin/md-master/css/editormd.css' %}">
<style>
  .title{
    border-right: 2px solid #ccc;
    min-height: 600px;
  }
  .content{
    min-height: 600px;
    text-align: center;
  }
</style>

{% endblock %}
{% block content %}
  <!--  内容区域-->
  <div class="container-fluid">
    <div class="panel panel-info">
      <div class="panel-heading"><i class="iconfont icon-caidan"></i>wiki知识库</div>
      <div class="panel-body">
        <!-- 左侧菜单栏       -->
        <div class="col-sm-3 title">
          {% for item in data %}
            {% if item.child %}
            <div class="first-item">

                   <a
                   class="firstitem item"
                   style="cursor:pointer;text-decoration: none"
                   data-toggle="collapse"
                   data-target="#s{{item.id}}"
                   aria-expanded="false"
                   data-id="{{item.id}}"
                   >
                    {{item.title}}
                    </a>
                    <!-- 弹出框                   -->
                    <div class="collapse second-item" id="s{{item.id}}">
                        <div style="margin-left: 10px">

<!--                          <a style="cursor:pointer;text-decoration: none">二级菜单</a>-->
                        </div>
                     </div>
            </div>

            {% else %}
                    <div style="cursor: pointer" class="item" data-id="{{item.id}}">{{item.title}}</div>
               {% endif%}
          {% endfor %}
        </div>
        <!-- 右侧内容区域       -->
         <div class="col-sm-9 content">
           <h3>
             《{{request.tracer.project.name}}》wiki知识库
           </h3>
           <a style="text-decoration: none;cursor: pointer" href="{% url 'web:wiki_add' project_id=request.tracer.project.id %}"><i class="iconfont icon-pen"></i> 新建文章</a>
         </div>
        </div>
    </div>
  </div>

{% endblock%}

{% block js %}
<script src="https://cdn.staticfile.org/jquery/3.6.1/jquery.js"></script>
<script src="{% static 'plugin/md-master/editormd.js' %}"></script>
<script src="{% static 'plugin/md-master/lib/flowchart.min.js' %}"></script>
<script src="{% static 'plugin/md-master/lib/jquery.flowchart.min.js' %}"></script>
<script src="{% static 'plugin/md-master/lib/marked.min.js' %}"></script>
<script src="{% static 'plugin/md-master/lib/prettify.min.js' %}"></script>
<script src="{% static 'plugin/md-master/lib/raphael.min.js' %}"></script>
<!--<script src="{% static 'plugin/md-master/lib/sequence-diagram.min.js' %}"></script>-->
<script src="{% static 'plugin/md-master/lib/underscore.min.js' %}"></script>
<script>

    function show(){
        let as=document.querySelectorAll('.firstitem')
        for(let item of as){
           item.addEventListener('click',async (e)=>{
               let url='{% url "web:wiki_category" project_id=request.tracer.project.id%}'
               let id=e.target.dataset.id
               const a_container=document.querySelector(`#s${id}`).children[0]
               a_container.innerHTML=''
               let formData=new FormData()
               formData.append('id',id)
               const res= await fetch(url,{
                   method : 'POST',
                   body:formData
               })
               const data=await res.json()
               if(data.code=200){
                   let cate_data=data.data

                   for(let item of cate_data){

                       if(item.child.length){

                           let dom_str=`<a style="cursor:pointer;text-decoration: none" class="item" data-id="${item.id}">${ item.title}</a>
                                        <div></div>
                                      `
                           a_container.insertAdjacentHTML('beforeend',dom_str)
                       }else{
                           let dom_str=`<div class="item" style="cursor: pointer" data-id="${item.id}">${item.title}</div>`
                           // a_container.children[0]
                           a_container.insertAdjacentHTML('beforeend',dom_str)

                       }


                   }

               }else{
                   alert('初始化目录失败！')
               }
               let items=document.querySelectorAll('.item')
                for (let item of items) {
                    item.addEventListener('click',temp)
                }
           })

        }


    }
    show()
    //绑定显示详情

    let temp= async (e)=>{
                let a_str=`<h2><a href="{% url 'web:wiki_detail' project_id=request.tracer.project.id %}?id=${e.target.dataset.id}">查看${e.target.innerText}</a></h2>`
                // console.log(e.target.innerText)
                // console.log(a_dom)

                const content_dom=document.querySelector('.content')
                const url=`{% url 'web:wiki_detail' project_id=request.tracer.project.id %}?id=${e.target.dataset.id}`
                const project_id="{{request.tracer.project.id }}"
                const res=await fetch(url,{
                    method : 'get'
                })
                const data=await res.json()
                if(data.code==200){
                    // content_dom.innerHTML=data.data
                // let url=`{% url 'web:wiki_edit' project_id=request.tracer.project.id wiki_id=${e.target.dataset.id`
                // console.log(url)
                content_dom.innerHTML=`<h3>
                                《{{request.tracer.project.name}}》wiki知识库
                            </h3>
                             <a style="text-decoration: none;cursor: pointer" href="{% url 'web:wiki_add' project_id=request.tracer.project.id %}"><i class="iconfont icon-pen"></i> 新建文章</a>
                             <div style="cursor: pointer;margin-top: 10px">
                                <a  href="/api/manage/${project_id}/wiki/edit/${e.target.dataset.id}/">编辑<i class="iconfont icon-girlggx"></i>${e.target.innerText}</a>
                                <a style="float: right" href="/api/manage/${project_id}/wiki/delete/${e.target.dataset.id}/">删除</a>
                             </div>
                `
                content_dom.insertAdjacentHTML('beforeend',`<div id="previewMarkdown"><textarea>${data.data}</textarea></div>`)
                }
                initPreviewMarkdown()
            }
    function bindDetail(){
        let items=document.querySelectorAll('.item')

        for (let item of items) {

            item.addEventListener('click',temp)
        }
    }
    bindDetail()
    //初始化展示markdown组件
    function initPreviewMarkdown(){
        editormd.markdownToHTML('previewMarkdown',{
            htmlDecode:'style,script,iframe'
        })
    }

</script>
{% endblock%}